iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
自我挑戰組

網頁前端框架 Vue 3 從頭開始(重新挑戰)系列 第 2

vue3 Composition API 學習手冊-2 Virtual DOM所帶來的好處

  • 分享至 

  • xImage
  •  

前一篇文章提到,其實並不是每一個專案都適合使用框架進行開發,應當是了解框架能夠帶來的優點後,在針對自己常接觸的專案進行評估導入,像我身邊許多朋友做的是中、小企業的形象網頁,在更新率不高、頁面數不多、瀏覽數有限的狀態下,實在未必需要利用框架,但當然這樣的網站利潤不會太高,所以在往更高階、資料互動性更高、網站瀏覽人數更多的網站上,框架往往能提供我們意想不到的好處,今天要來介紹的是我羅列出來最後一個框架的特色“Virtual DOM”(當然特色不僅如此,只是重點羅列)。

Virtual DOM是現代框架提昇網頁效能上的一個重點,在Vue 3的特色中也提到了有比前一版本更快速的Virtual DOM處理,至於為何Virtual DOM能提昇網頁的效能,大家就必須了解我們透過Javascirpt更新實體DOM時會產生的效能問題開始了解。

實體DOM更新的效能測試


這邊製作一個簡單的範例對實體DOM和虛擬DOM的效能進行說明:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <div class="wrapper">
    <div class="container">
      <div class="main">
        <div class="itemList">
          <p id="pID">Item 1</p>
        </div>
      </div>
    </div>
    <button onClick="insertItems()">Go</button>
  </div>
</body>
</html>
<script>
  var itemData = "";
  function insertItems() {
    for (var i = 1; i <= 100000; i++) {
      itemData = "Item " + i
      document.getElementById("pID").innerHTML = itemData;
    }
  }
</script>

上面這個案例當使用者按下按鈕的時候,程式會透過一個迴圈去更新頁面上的內容,在傳統HTML DOM的操作上只要頁面元素有變更,就可能會觸發Reflow或Repaint這樣的動作,瀏覽器也會耗費相當多的資源在進行這些動作,以上述的例子來看,當我們按下頁面上的按鈕之後,就會透過迴圈去改變p的內容,這樣將會觸發多次的瀏覽器動作。

DOM Reflow

下圖是我們在Chrome中獲得的效能資訊:

DOM Reflow Performance

若是我們將上述程式中的第27行移除,則效能會改變如下圖所示:

DOM No Reflow Performance

這樣可以很明確的了解效能殺手就是程式中的第27行,而這行程式的目的是去更新瀏覽器中的內容,若沒有這行沒辦法讓使用者看到最終的結果,因為我們必須透過這樣的方式更新DOM內容。

虛擬DOM的效能測試


同樣頁面的效果,我們在Vue裡面的作法如下(主要在分析Virtual DOM的效能,大家可以先不用在乎程式的內容是否能弄懂):

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="https://unpkg.com/vue@next"></script>
</head>

<body>
	<div id="app">
		<div class="wrapper">
			<div class="container">
				<div class="main">
					<div class="itemList">
						<p id="pID">{{ state.message }}</p>
					</div>
				</div>
			</div>
			<button @click="insertItems">Go</button>
		</div>
	</div>
</body>

</html>
<script>
	const { reactive } = Vue;
	const app = {
		setup(){
			const state = reactive({
				message: 'Item 1'
			})
			function insertItems(){
				for (let i = 1; i <= 100000; i++) {
					state.message = "Item " + i;
				}
			}
			return { state, insertItems }
		}	
	}
	const myVue = Vue.createApp(app).mount("#app");
</script>

同樣的結果在Vue會在Javascript和瀏覽器中加入一層Virturl DOM,待Virturl DOM更新完畢之後,再寫入瀏覽器中。

Virtual DOM Reflow

透過這樣的方法,使用這得到的一樣的效果,但大大提高了使用者端瀏覽器的效能,可以從下圖觀察的出來(大部分的浪費的時間是我點選錄製與停止錄製的Idle Time)。

Virtual DOM Performance

在Virtual DOM的架構中,會把程式的動作動作集中在Virtual DOM中運算,當確定整個頁面結構之後,再一次性地將結果繪製到頁面中,可以想像成原本的DOM操作就是在每一次在CPU運算之後,直接把結果寫到硬碟當中,而Virtual DOM就是在CPU與硬碟間加入了記憶體層,CPU運算後先將結果儲存在記憶體中,最後再將記憶體的資料一次性的寫入硬碟

PS:記憶體的運算速度超過硬碟很多倍。

結論


綜合上述所說,網頁專案中採用前端框架,有著減少開發時間、易於維護、增加頁面效能…等優點,但若你的專案並不會大量與後端串接、製作上元件重複使用的機會不高、在頁面中也不太會對DOM進行Reflow與Repaint,可能是一個活動網頁、公司形象網頁…等,也許就沒有必要去選用一個前端框架,簡言之工具用在正確的地方,才能顯現出它的價值,當然目前符合使用框架的專案也一定非常多,也就是這樣的原因,才會造成前端框架的流行。


上一篇
vue3 Composition API 學習手冊-1 框架的選擇與導入
下一篇
vue3 Composition API 學習手冊-3 起手式
系列文
網頁前端框架 Vue 3 從頭開始(重新挑戰)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言